<template>
    <div class="child-section">
        <buni-header>
            <div class="main">
				<van-overlay :show="isLoading">
				  <div class="empty">
				  	<van-loading type="spinner" color="#1989fa" />
				  </div>
				</van-overlay>
				<div class="module">
					<van-steps :active="active" active-icon="success" active-color="#ff340c">
					  <van-step>融资需求</van-step>
					  <van-step>企业信息</van-step>
					  <van-step>联系人</van-step>
					  <van-step>上传证件</van-step>
					  <van-step>授权书</van-step>
					</van-steps>
				</div>
				<div>
					<van-form @submit="onSubmit" ref="ruleForm" :scroll-to-error='true' :show-error-message='false' label-width='100px'>
						<!-- 上传证件 -->
						<div class="module">
							<h3>上传证件</h3>
							<div class="upload">
								<h4>营业执照扫描件<span>（必填）</span></h4>
								<p class="info">说明：营业执照正，副本或盖章后的复印件扫描件，上传图片大小不超过5M，若不能上传，请裁剪后重新上传。</p>
								<div class="uploader">
									<van-uploader v-model="licenseImg" :max-size="5 * 1024 * 1024" :max-count="1" @oversize="onOversize"/>
								</div>
							</div>
							<div class="upload">
								<h4>法人身份证人像面<span>（必填）</span></h4>
								<p class="info">说明：仅能上传图片，上传图片大小不超过5M。</p>
								<div class="uploader">
									<van-uploader v-model="faceImg" :max-size="5 * 1024 * 1024" :max-count="1" @oversize="onOversize"/>
								</div>
							</div>
							<div class="upload">
								<h4>法人身份证国徽面<span>（必填）</span></h4>
								<p class="info">说明：仅能上传图片，上传图片大小不超过5M。</p>
								<div class="uploader">
									<van-uploader v-model="countryImg" :max-size="5 * 1024 * 1024" :max-count="1" @oversize="onOversize"/>
								</div>
							</div>
							<div class="button">
								<van-button round block plain type="default" native-type="button" @click="handleBack">上一步</van-button>
								<van-button round block type="info" native-type="button" @click="handleNext">下一步</van-button>
							</div>
						</div>
					</van-form>
				</div>
			</div>
        </buni-header>
    </div>
</template>

<script>
import buniHeader from "../../components/buniHeader.vue";
import { areaList } from '@vant/area-data';
import { Toast } from 'vant';
export default {
    name:'upload',
    components: {
        buniHeader
    },
    data() {
        return {
			active:3,
			timer:null,
			isLoading:false,
			licenseImg:[],
			faceImg:[],
			countryImg:[]
        }
    },
	created() {
		
	},
    methods: {
		handleBack(){
			this.$router.back()
		},
		handleNext(){
			if(this.licenseImg.length == 0){
				Toast.fail('请上传营业执照扫描件');
				return
			}
			if(this.faceImg.length == 0){
				Toast.fail('请上传法人身份证人像面');
				return
			}
			if(this.countryImg.length == 0){
				Toast.fail('请上传法人身份证国徽面');
				return
			}
			this.isLoading = true;
			this.timer = setTimeout(()=>{
				this.isLoading = false;
				this.$router.push({path:"/authorization"})
			},500)
		},
		onOversize(file) {
		  Toast('文件大小不能超过 5M');
		},
		onSubmit(){
			
		},
    },
	beforeDestroy() {
		clearTimeout(this.timer);
	}
}
</script>
<style scoped lang="scss">
.main{
	width: 10rem;
	background: #083bb9;
	padding: 0 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.empty{
		width: 10rem;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.module{
		width: calc(10rem - 40px);
		padding: 0.133333rem 0.133333rem;
		border-radius: 0.066666rem;
		margin-bottom: 0.133333rem;
		background-color: #fff;
		h3{
			margin: 0.133333rem 0 0.133333rem 0.133333rem;
			font-size: 32px;
		}
		.upload{
			padding: 0 0.4rem;
			margin-top: 0.266666rem;
			h4{
				margin: 0;
				span{
					color: #f00;
				}
			}
			.info{
				color: #ccc;
			}
			.uploader{
				height: 5.333333rem;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 0.013333rem solid #ccc;
			}
		}
		.button{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
}
</style>
<style type="text/css">
.van-radio{
	margin-bottom: 0.133333rem;
}
.van-button{
	margin-top: 0.266666rem !important;
}
</style>